<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" name="viewport" />

    <title>jQuery MobiScroll</title>

    <link rel="stylesheet"  href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />

    <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>

    <script src="js/mobiscroll-1.5.js" type="text/javascript"></script>

    <link href="css/mobiscroll-1.5.css" rel="stylesheet" type="text/css" />

    <style type="text/css">
        body {
            font-family: arial, verdana, sans-serif;
            font-size: 12px;
        }
    </style>

    <script type="text/javascript">
        $(document).ready(function () {
            $('#date1').scroller();
            $('#date2').scroller({ preset: 'time' });
            $('#date3').scroller({ preset: 'datetime' });
            wheels = [];
            wheels[0] = { 'Hours': {} };
            wheels[1] = { 'Minutes': {} };
            for (var i = 0; i < 60; i++) {
                if (i < 16) wheels[0]['Hours'][i] = (i < 10) ? ('0' + i) : i;
                wheels[1]['Minutes'][i] = (i < 10) ? ('0' + i) : i;
            }
            $('#custom').scroller({
                width: 90,
                wheels: wheels,
                showOnFocus: false,
                formatResult: function (d) {
                    return ((d[0] - 0) + ((d[1] - 0) / 60)).toFixed(1);
                },
                parseValue: function (s) {
                    var d = s.split('.');
                    d[0] = d[0] - 0;
                    d[1] = d[1] ? ((('0.' + d[1]) - 0) * 60) : 0;
                    return d;
                }
            });
            $('#custom').click(function() { $(this).scroller('show'); });
            $('#disable').click(function() {
                if ($('#date2').scroller('isDisabled')) {
                    $('#date2').scroller('enable');
                    $(this).text('Disable');
                }
                else {
                    $('#date2').scroller('disable');
                    $(this).text('Enable');
                }
                return false;
            });

            $('#get').click(function() {
                alert($('#date2').scroller('getDate'));
                return false;
            });

            $('#set').click(function() {
                $('#date1').scroller('setDate', new Date(), true);
                return false;
            });

            $('#theme, #mode').change(function() {
                var t = $('#theme').val();
                var m = $('#mode').val();
                $('#date1').scroller('destroy').scroller({ theme: t, mode: m });
                $('#date2').scroller('destroy').scroller({ preset: 'time', theme: t, mode: m });
                $('#date3').scroller('destroy').scroller({ preset: 'datetime', theme: t, mode: m });
                $('#custom').scroller('option', { theme: t, mode: m });
            });
        });
    </script>

<body>
    <div data-role="page" data-theme="b" id="jqm-home">
        <div data-role="header" data-theme="a">
            <h1>Mobiscroll</h1>
        </div>

        <div data-role="content" data-theme="d">
            <form id="testform">
                <div data-role="fieldcontain">
                    <label for="theme">Theme</label>
                    <select name="theme" id="theme" data-native-menu="false">
                        <option value="default">Default</option>
                        <option value="android">Android</option>
                        <option value="sense-ui">Sense UI</option>
                        <option value="ios">iOS</option>
                    </select>
                </div>

                <div data-role="fieldcontain">
                    <label for="mode">Mode</label>
                    <select name="mode" id="mode" data-native-menu="false">
                        <option value="scroller">Scroller</option>
                        <option value="clickpick">Clickpick</option>
                    </select>
                </div>

                <div data-role="fieldcontain">
                    <label for="date1">Date</label>
                    <input type="text" name="date1" id="date1" class="mobiscroll" readonly="readonly" value="12/08/2010" />
                </div>

                <div data-role="fieldcontain">
                    <label for="date2">Time</label>
                    <input type="text" name="date2" id="date2" class="mobiscroll" value="11:23 AM" />
                </div>

                <div data-role="controlgroup" data-type="horizontal">
                    <button id="disable" data-theme="a">Enable/Disable</button>
                    <button id="get" data-theme="a">Get</button>
                    <button id="set" data-theme="a">Set</button>
                </div>

                <div data-role="fieldcontain">
                    <label for="date3">Datetime</label>
                    <input type="text" name="date3" id="date3" class="mobiscroll" />
                </div>

                <div data-role="fieldcontain">
                    <label for="custom">Custom</label>
                    <input type="text" name="custom" id="custom" class="mobiscroll" value="" />
                </div>

            </form>More script and css style
: <a href="http://www.htmldrive.net/" title="HTML DRIVE - Free DHMTL Scripts,Jquery 

plugins,Javascript,CSS,CSS3,Html5 Library">www.htmldrive.net </a>
        </div>
    </div>
	
</body>
</html>
